import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    InteractionManager,
    Text,
    TouchableOpacity,
} from 'react-native';
import Common from '../common/constants';
import {InputItem, WhiteSpace, WingBlank, Button, Toast} from 'antd-mobile';

import {getValidateCode, sendMessageForMobile} from '../actions/registerAction';

import GUID from '../common/guid';

import RegisterMobileContainer from '../containers/RegisterMobileContainer';


export default class Register extends React.Component{

    constructor(props) {
        super(props);

        let guidobject = new GUID();　　
        let guid = guidobject.newGUID();

        this.state = {
            'guid' : guid
        };
    }

    componentWillMount() {
        console.log('componentWillMount');
        let { registerReducer } = this.props;
    }


    componentWillReceiveProps() {
        console.log('componentWillReceiveProps');
        let { registerReducer } = this.props;
        console.log(registerReducer);
        console.log(registerReducer.res.errcode);
    }

    componentDidReceiveProps() {
        console.log('componentDidReceiveProps');
    }

    componentDidMount() {
        console.log('componentDidMount');
        const {dispatch} = this.props;
        dispatch(getValidateCode(this.state.guid));
    }


    componentWillUpdate(){
        console.log('componentWillUpdate');
        let { registerReducer } = this.props;
        console.log(registerReducer);
        console.log(registerReducer.res.errcode);
    }

    componentDidUpdate() {
        console.log('componentDidUpdate');
        let { registerReducer } = this.props;
        console.log(registerReducer);
        console.log(registerReducer.res.errcode);

        if(registerReducer.res.errcode === 9999){
            Toast.fail(registerReducer.res.errmsg, 1);
            registerReducer.res = {};
        }

        if(registerReducer.res.errcode === 0){
            registerReducer.res = {};
            this.props.navigator.push({
                component: RegisterMobileContainer,
                leftButtonTitle : '< 返回',
                'navigationBarHidden' : false,
                'title' : '输入验证码',
                passProps: { 'mobile': registerReducer.mobile, 'guid' : this.state.guid },
                onLeftButtonPress : () => this.props.navigator.pop()
            })
        }
    }

    _register() {
        
        const {dispatch} = this.props;

        dispatch(sendMessageForMobile({
            'mobile' : this.props.registerReducer.mobile,
            'clientType': 'app',
            'key': this.state.guid,
            'vCode': this.props.registerReducer.code
        }));
    }

    _back() {
        this.props.navigator.pop();
    }

    render(){

        console.log('render');

        let { registerReducer } = this.props;
        console.log(registerReducer);
        console.log(registerReducer.res.errcode);
        
        let ddd = registerReducer.validateCode[this.state.guid];

        return (
            <View style={styles.main}>
                <InputItem
                    type="number"
                    placeholder="手机号"
                    clear={true}
                    autpFocus={true}
                    onChange={(text) => {
                        registerReducer.mobile = text;
                    }}
                >用户名</InputItem>
                <View style={styles.v} >
                    <InputItem
                        clear={true}
                        style={styles.validateInput}
                        onChange={(text) => {
                            registerReducer.code = text;
                        }}
                    >验证码</InputItem>
                    <TouchableOpacity 
                        onPress={() => {
                            this.props.dispatch(getValidateCode(this.state.guid))
                        }}
                    >
                    <Image source={{uri: ddd}} style={styles.validateCode} />
                    </TouchableOpacity>
                </View>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" type="primary" 
                        loading={registerReducer.loading}
                        disabled={registerReducer.loading}
                        activeStyle={registerReducer.loading ? false : {}}
                        onClick={this._register.bind(this)}
                    >下一步</Button>
                </WingBlank>
                <WhiteSpace size="lg" />
                <WingBlank size="lg">
                    <Button className="btn" 
                        onClick={this._back.bind(this)}
                    >返回</Button>
                </WingBlank>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    main : {
        marginTop : 20 + Common.window.height - 500,
        flexDirection: 'column', 
        alignContent : 'center',
    },

    v : {
        flexDirection : 'row',
    },

    validateInput : {
        width : Common.window.width - 180,
    },

    validateCode : {
        width : 150,
        height : 40,
        marginTop : 5,
    }

})